<template>
	<view style="width: 100%;">
		<view class="index-container">
			<view class="grid-container" v-if="operaList&&operaList.total">
				<view @click="nav('/pages/common/article/detail?article_id='+item.article_id)" class="grid-item" v-for="(item,index) in operaList.data" :key="index">
					<image :src="baseURL+'/'+item.cover_img" mode="aspectFill"></image>
					<view class="item-title">
						{{ item.title }}
					</view>
				</view>
			</view>
			<view style="width: 100%;" class="justify-center" v-else>
				<Empty tips_text="暂无剧场"></Empty>
			</view>
		
			<LastView ref="last-view"></LastView>
		</view>
		
	</view>
</template>

<script>
	import LastView from '@/pages/opera/components/LastView.vue'
	import config from '@/pages/opera/config.js'
	
	export default {
		components:{
			LastView,
		},
		data() {
			return {
				constant:this.constant,
				baseURL:this.baseURL,
				barIndex:1,
				barlists:config.barlists,
				checkCat:0,
				operaList: null
			}
		},
		onLoad(e) {
			if(e.type){
				uni.setNavigationBarTitle({
					title:e.type
				})
			}
			this.get('crud/list',{table:'article', limit: 9999}).then(({code,paginate})=>{
				if(code==1){
					this.operaList=paginate
				}
			})
		},
		onShow() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.index-container {
		padding: 0rpx 24rpx;

		.tab-item {
			font-size: 28rpx;
			color: #333333;

			&.active {
				color: #f69316;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: -10rpx;
					width: 100%;
					height: 5rpx;
					background: #f69316;
				}
			}
		}

		.swiper-container {
			margin-top: 32rpx;
			width: 702rpx;
			height: 300rpx;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 702rpx;
				height: 300rpx;
			}
		}

		.category-container {
			margin: 24rpx 0rpx;

			.cate-item {
				font-size: 28rpx;
				color: #666666;

				image {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}

		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-row-gap: 24rpx;
			grid-column-gap: 24rpx;

			.grid-item {
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0rpx 4rpx 8rpx #dedede;

				image {
					width: 339rpx;
					height: 508rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					padding: 0rpx 10rpx;
					line-height: 60rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>